<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js"></script>
</head>

<body>

    <div class="box">
        <!-- // substring(起始位置，截取几个字符)，包前不包尾 -->
     <!-- 如果想让首字母大写 value.substring(0,1).toUpperCase()+value.substring(1) -->
    <!-- 但是这样子写显得很臃肿 难以维护 ，
        所以我们推荐使用计算属性来描述复杂逻辑 -->
        <div>{{value.substring(0,1).toUpperCase()+value.substring(1)}}</div>



        <!-- // 基于依赖，响应改变，有缓存 只执行一次 如果修改就会执行  -->
           <!-- 方法会每次都会执行  -->
           <!-- 如果输出的大于一个    计算属性   性能更好 -->
        <div>计算属性---{{computedname}}</div>
        <div>方法---{{computedname1()}}</div>
    </div>
    <script>
        const objs = {
            data() {
                return {
                  value:'hhb' 
                }
            },
           methods:{
            computedname1(){
                return this.value.substring(0,1).toUpperCase()+this.value.substring(1)
               }
           },


            computed:{
                // 基于依赖，响应改变，有缓存
                // 基于依赖程序修改后，重新计算
               computedname(){
                return this.value.substring(0,1).toUpperCase()+this.value.substring(1)
               }
            }

        }
        // let a='sahfh'
        // a.toUpperCase()大写
        // a.toLowerCase()小写
        // substring(起始位置，截取几个字符)，包前不包尾
        let app = Vue.createApp(objs).mount('.box')
    </script>
</body>

</html>